<template>
  <div class="matching-page">
    <div class="matching-content">
      <div style="min-height: 862px;" v-if="!planID">
        <!-- <div>
          <div class="left-header">
            <div class="title">做规划</div>
            <div class="reset" @click="resetForm">重置匹配条件</div>
          </div>
          <div class="line"></div>
        </div> -->
        <div class="matching-left">
          <div class="matchTitle">
            <p style="color:#4A4A4A">做规划</p>
            <el-button link type="primary" @click="resetForm">重置</el-button>
          </div>
          <el-autocomplete
            class="w-full"
            v-model="form.keyword"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入单位名称"
            value-key="name"
            @select="handleSelect"
          >
            <template #prepend>&nbsp;单&nbsp;位&nbsp;名&nbsp;称</template>
          </el-autocomplete>

          <el-input class="mt-4" v-model="form.price" placeholder="Please input">
            <template #prepend>近一&nbsp;年收入</template>
            <template #append>万元</template>
          </el-input>
          <div class="mt-5 flex justify-center">
            <el-button type="primary" class="w-2/3" @click="startMatching">
              开始匹配
            </el-button>
          </div>
          <div class="text-left mt-3 text-yellow-400">
            温馨提示：<br/>1、请以“万元”为单位，填写单位近一年报税的主营收入。<br/>
2、规划基于平台匹配模型自动生成，若有偏差，敬请谅解！<br/>
3、可通过鼠标右键删除规划内容，调整完成后保存即可。
          </div>
        </div>
        <div class="approval">
          <p style="color: rgb(74, 74, 74);font-weight:800">立项结果统计</p>
          <img v-if="!itemStatisticsList.length" src="../../assets/image/approval.png"/>
              <ECharts
              style="margin: auto;"
              v-else
                :option="approvalOption"
                width="250"
                height="250"
              />
        </div>
        <div class="matching">
          <p style="color: rgb(74, 74, 74);font-weight:800">匹配结果统计</p>
          <img v-if="!normalStatisticsList.length" src="../../assets/image/matching.png"/>
          <ECharts
          v-else
              style="margin: auto;"
                :option="mactingOption"
                width="250"
                height="250"
              />
        </div>

      </div>
      <div class="matching-right overflow-hidden">
        <div class="atlas" v-if="atlasTables">
          <!-- <policyAtlas
            v-if="policyData"
            :data="policyData"
            :params="{ ...form, companyID }"
            :planID="planID"
            :userID="planUserID"
            @resetPlanData="resetForm"
          /> -->
          <!-- v-if="policyData" -->
          <atlasTable :data="atlasTables" :companyName="companyName" :companyID="companyID" :form="form"></atlasTable>
          <!-- <vueTree v-if="policyData" :companyID="companyID" :form="form" :data="policyData" :disabled='false' :type="'gh'" :typeFx="'fx'" :seachType="'2'"/> -->
        </div>
        <div class="h-full flex items-center justify-center" v-loading="loading" v-else>
          <div class="text-gray-500 text-xl">请在左侧进行匹配您的公司规划</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usematchingHook } from "./hook";
import policyAtlas from "../../components/planAtlas/index.vue";
import vueTree from "../../components/vueTree/index.vue";
import atlasTable from "../../components/atlasTable/index.vue";

import ECharts from "../../components/echarts/index.vue";
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/sunburst';
import { reactive } from "vue";

const {
  form,
  handleSelect,
  querySearchAsync,
  startMatching,
  policyData,
  resetForm,
  companyID,
  planID,
  planUserID,
  itemStatisticsList,
  normalStatisticsList,
  loading,
  atlasTables,
  companyName
} = usematchingHook();

const approvalOption = reactive({
  // tooltip:{trigger: 'item',formatter: '{b0}: {c0}<br />'},
  color:[
            '#8ecace',
            '#3f9bad',
            '#9dc47f',
            '#d5e4c0',
            '#d6b652',
            '#faedbb',
            '#466cb4',
            '#9ab4d9',
          ],
          // silent: true,
  series: {
    type: 'sunburst',
    data: itemStatisticsList,
    radius: [30, '90%'],
    itemStyle: {
      // borderRadius: 7,
      borderWidth: 2
    },
    label: {
      show: true
    }
  }
})
  const mactingOption = reactive({
  // tooltip:{trigger: 'item',formatter: '{b0}: {c0}<br />'},
    color:[
            '#3509d6',
            '#8257ec',
            '#2f32d1',
            '#7581e6',
            '#8575ac',
            '#c9bcde',
            '#c95a7a',
            '#f8d2da',
          ],
          // silent: true,
  series: {
    type: 'sunburst',
    data: normalStatisticsList,
    radius: [30, '90%'],
    itemStyle: {
      // borderRadius: 7,
      borderWidth: 2
    },
    label: {
      show: true
    }
  }
})

</script>

<style scoped lang="postcss">
.echarts {
  width: 100%;
  height: 100%;
}
.matching-page {
  @apply w-full h-full py-5;
  height: calc(100vh - 48px);
  .matching-content {
    @apply w-2/3 mx-auto h-full flex;
    height: 100%;
    .matching-left {
      @apply bg-white h-full mr-4 p-3 rounded-md;
      width: 400px;
      /* min-height: 280px; */
      height: 35%;
      /* height: 300px; */
      /* font-size:16px; */
      .matchTitle{
        @apply font-bold;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      /* .left-header {
        @apply flex justify-between;
        .title {
          @apply font-bold;
        }
        .reset {
          @apply text-gray-400 cursor-pointer;
        }
      }
      .line {
        @apply bg-gray-200 my-3;
        height: 1px;
      } */
    }
    .matching ,.approval{
      @apply bg-white;
        padding: 10px;
        margin-top: 10px;
        width: 400px;
        /* height: 270px; */
        height: 31.5%;
        img{
          width: 250px;
          height:200px;
          margin: auto;
        }
      }
    .matching-right {
      @apply flex-1 bg-white  rounded-md;
      min-height: 862px;
      .tips {
        @apply text-center my-2 text-yellow-400 overflow-hidden w-2/3 mx-auto;
      }
    }
  }
}

.wrapper {
  @apply bg-theme-color relative rounded-full cursor-pointer;
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-top: 200px;
}
.wrapper:after {
  @apply text-white rounded-full text-center inline-block;
  content: "开始匹配";
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 18px;
}
.wrapper:hover .round {
  -webkit-transform: scale(1);
  opacity: 1;
  -webkit-animation: rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.round {
  @apply absolute rounded-full opacity-0;
  width: 200px;
  height: 200px;
  border: 2px solid #256eb7;
  -webkit-transition: all 1s;
  -webkit-transform: scale(0.35);
  top: -50px;
  left: -50px;
  /* transform: translate(-50%, -50%); */
}
.round span {
  @apply bg-theme-color;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid #256eb7;
  color: #fff;
  text-align: center;
  position: absolute;
}
.round span:nth-child(1) {
  right: -22px;
  top: 50%;
  margin-top: -22px;
}
.round span:nth-child(2) {
  left: -22px;
  top: 50%;
  margin-top: -22px;
}
.round span:nth-child(3) {
  left: 50%;
  bottom: -22px;
  margin-left: -22px;
}
.round span:nth-child(4) {
  left: 50%;
  top: -22px;
  margin-left: -22px;
}
</style>
